<template>
  <el-container :style="{ height: $store.state.mainContainerHeight - 40 + 'px' }">
    <el-main>
      <el-form
        ref="form"
        label-width="180px"
        :model="formData"
      >
        <el-tabs type="border-card">
          <el-tab-pane label="下单说明">
            <squill-editor-qiniu
              v-if="qiniuConfig.token"
              :token="qiniuConfig.token"
              v-model="formData.orderDesc"
              :domain="qiniuConfig.domain"
              :data="{
                key: uploadKey,
                token: qiniuConfig.token,
                domain: qiniuConfig.domain,
              }"
              :uploadUrl="qiniuConfig.uploadUrl"
            ></squill-editor-qiniu>
          </el-tab-pane>
          <el-tab-pane label="充值查账">
            <squill-editor-qiniu
              v-if="qiniuConfig.token"
              :token="qiniuConfig.token"
              v-model="formData.rechargeDesc"
              :domain="qiniuConfig.domain"
              :data="{
                key: uploadKey,
                token: qiniuConfig.token,
                domain: qiniuConfig.domain,
              }"
              :uploadUrl="qiniuConfig.uploadUrl"
            ></squill-editor-qiniu>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-main>

    <el-footer>
      <el-row
        type="flex"
        justify="center">
        <el-button
          type="primary"
          @click="onSubmit"
          v-waves>保存</el-button>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
import platformApi from '@/api/platform'
import qiniuAPI from '@/api/qiniu'
import { mapGetters } from 'vuex'
import SquillEditorQiniu from '@/components/quill-editor-qiniu.vue'
export default {
  components: {
    SquillEditorQiniu
  },
  data () {
    return {
      qiniuConfig: {
        token: null,
        uploadUrl: null,
        domain: null
      },
      formData: {
        orderDesc: null,
        rechargeDesc: null
      }
    }
  },
  created () {
    qiniuAPI.getGoodsConfig().then((res) => {
      this.qiniuConfig = res.data
    })
    platformApi.getPlatform().then(response => {
      this.formData.orderDesc = response.data.orderDesc
      this.formData.rechargeDesc = response.data.rechargeDesc
    })
  },
  computed: {
    ...mapGetters(['token']),
    uploadKey () {
      return new Date().getTime() + '' + Math.floor(Math.random() * 1000)
    }
  },
  methods: {
    onSubmit () {
      platformApi.updatePlatform(this.formData).then(() => {
        this.$notify({
          title: '成功',
          message: '信息修改成功',
          type: 'success'
        })
      })
    }
  }
}
</script>

<style lang="scss">
.thumb {
  width: 150px;
  height: 150px;
  display: block;
}

.inline-group {
  .el-form-item {
    margin-right: 10px !important;
    display: inline-block;
    .el-form-item__label {
      width: auto !important;
    }

    .el-form-item__content {
      margin-left: 0 !important;
      display: inline-block;
    }
  }
}
</style>
